function Slider(id) {
  //id 轮播区块的id
  this.sliderBox = document.getElementById(id); //轮播区域
  this.sliderUl = this.sliderBox.children[0];
  this.sliderList = this.sliderUl.children; //轮播区块
  this.len = this.sliderList.length; //区块的个数
  this.i = 0;
  this.timer = null;
  this.autoPlay(); //每一个轮播图自动轮播
  this.clearAndSet(); //清除和开启定时器
}
Slider.prototype.move = function () {
  this.i++;
  if (this.i == this.len) {

    this.i = 0;
  }
  if (this.i == -1) {
    this.i = this.len - 1;
  }
  if (this.circles) { //有小圆点存在的情况
    for (let j = 0; j < this.circles.length; j++) {
      this.circles[j].className = "";
    }

    this.circles[this.i].className = "hover";

  }
  for (let i = 0; i < this.len; i++) {
    //this.sliderList[i].style.display = "none";
    startMove(this.sliderList[i], {
      opacity: 0
    });
  }

  //this.sliderList[this.i].style.display = "block";

  startMove(this.sliderList[this.i], {
    opacity: 100
  });


}
Slider.prototype.autoPlay = function () {
  this.timer = setInterval(() => {
    this.move();
  }, 3000);
}
Slider.prototype.addBtns = function () {
  let oDiv = document.createElement("div");
  oDiv.className = "btns";
  oDiv.innerHTML = "<span>&lt;</span><span>&gt;</span>";
  this.sliderBox.appendChild(oDiv);
  this.lArrow = oDiv.children[0];
  this.rArrow = oDiv.children[1];
  this.lArrow.onclick = () => {
    this.i -= 2;
    this.move();
  }
  this.rArrow.onclick = () => {
    this.move();
  }

}
Slider.prototype.addCircle = function () {
  let oUl = document.createElement("ul");
  oUl.className = "circle";
  let str = "";
  for (let i = 0; i < this.len; i++) {
    str += `<li>${i+1}</li>`
  }
  oUl.innerHTML = str;
  this.sliderBox.appendChild(oUl);
  this.circles = oUl.children;
  this.circles[0].className = "hover";
  for (let j = 0; j < this.circles.length; j++) {
    this.circles[j].onmouseover = () => {
      this.i = j - 1;
      this.move();
    }
  }

}
Slider.prototype.clearAndSet = function () {
  this.sliderBox.onmouseover = () => {
    clearInterval(this.timer);
  }
  this.sliderBox.onmouseout = () => {
    this.timer = setInterval(() => {
      this.move();
    }, 3000)
  }
}